<template>
	<view class="container">
		<view class="back-btn flex-item-center" @click="closePage">
			<uni-icons type="left" size="25" color="#000"></uni-icons>
		</view>
		<view class="count-time">
			<uni-countdown :show-day="false" :show-hour="false" :second="timeupSecond" @timeup="timeup" color="#{{ $t('chat.countdownColor') }}" splitorColor="#{{ $t('chat.countdownColor') }}" />
		</view>
		<view class="sound-box flex-item-center">
			<image v-if="!isSoundClosed" src="/static/sound.png"></image>
			<image v-else src="/static/sound-close.png"></image>
		</view>
		
		<!-- 中间的动物 - 根据URL参数切换 -->
		<view class="animal-box">
			<image :src="getAnimalImage(animalType)" mode="aspectFit"></image>
			<text class="shadow"></text>
		</view>
		
		<!-- 语聊 -->
		<view v-if="!showTyping" class="loader-box">
			<view class="breath-loader">
				<view class="breath-line"></view>
				<view class="breath-line"></view>
				<view class="breath-line"></view>
				<view class="breath-line"></view>
				<view class="breath-line"></view>
			</view>
		</view>
		
		<!-- 底部按钮 -->
		<view v-if="!showTyping" class="bottom-box flex-just-between">
			<view class="bottom-item" @click="showPopup">
				<view class="img-box flex-item-center">
					<image src="/static/typing-icon.png"></image>
				</view>
				<text>{{ $t('chat.typing') }}</text>
			</view>
			<view class="bottom-item" @click="openRecords">
				<view class="img-box flex-item-center">
					<image src="/static/records-icon.png"></image>
				</view>
				<text>{{ $t('chat.records') }}</text>
			</view>
		</view>
		
		<!-- 切换到文字输入 -->
		<view v-if="showTyping" class="write-bottom flex-item-center">
			<image class="picture-img" src="/static/picture-icon.png" @click="openPicture"></image>
			<view class="txtarea-box">
				<textarea :placeholder="$t('chat.inputPlaceholder')"></textarea>
				<view class="mic-icon" @click="showTyping=false">
					<uni-icons type="mic" size="30" color="#666"></uni-icons>
				</view>
			</view>
			<image class="record-img" src="/static/records-icon.png" @click="openRecords"></image>
		</view>
		
		<!-- 打字切换提示弹窗 -->
		<uni-popup class="popUpAlert" ref="popup" type="center">
			<view class="popup-content">
				<view class="title">{{ $t('chat.switchToTextTitle') }}</view>
				<view class="des">{{ $t('chat.switchToTextDesc') }}</view>
				<view class="btn-box flex-item-center">
					<view class="btn cancel" @click="cancelPopup">{{ $t('chat.cancel') }}</view>
					<view class="btn confirm" @click="confirmPopup">{{ $t('chat.confirm') }}</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				showTyping: false, // 是否显示打字输入框
				timeupSecond: 600, // 倒计时秒数
				animalType: 'otter', // 动物类型，默认水獭
				isSoundClosed: false, // 声音状态，默认开启
				// 动物图片映射
				animalImageMap: {
					otter: '/static/img-sq.png',
					bee: '/static/img-bee.png',
					cat: '/static/img-cat.png'
				}
			}
		},
		onLoad(options) {
			// 从URL参数中获取动物类型
			if (options.animal) {
				this.animalType = options.animal;
			}
			
			// 从URL参数中获取声音状态（可选）
			if (options.isSoundClosed === 'true') {
				this.isSoundClosed = true;
			}
		},
		methods: {
			// 关闭页面
			closePage() {
				uni.navigateBack({ delta: 1 })
			},
			
			// 倒计时结束事件
			timeup() {
				uni.showToast({
					title: this.$t('chat.timeupToast'),
					icon: 'none'
				})
			},
			
			// 获取动物图片
			getAnimalImage(animalType) {
				return this.animalImageMap[animalType] || this.animalImageMap.otter
			},
			
			// 显示弹窗
			showPopup() {
				this.$refs.popup.open()
			},
			
			// 取消弹窗
			cancelPopup() {
				this.$refs.popup.close()
			},
			
			// 确认弹窗
			confirmPopup() {
				this.showTyping = true
				this.$refs.popup.close()
			},
			
			// 打开记录
			openRecords() {
				uni.showToast({
					title: this.$t('chat.recordsToast'),
					icon: 'none'
				})
			},
			
			// 打开图片
			openPicture() {
				uni.showToast({
					title: this.$t('chat.pictureToast'),
					icon: 'none'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		height: 100vh;
		box-sizing: border-box;
		background: url('/static/chat-bg.jpg') top center no-repeat;
		background-size: 100%;
		position: relative;
		padding-top: 102rpx;
		.back-btn, .sound-box{
			position: absolute;
			top: 110rpx;
			width: 72rpx;
			height: 76rpx;
			background-color: #fff;
			border-radius: 30rpx;
			justify-content: center;
		}
		.back-btn{
			left: 21rpx;
		}
		.count-time{
			margin: 0 auto;
			width: 152rpx;
			height: 74rpx;
			line-height: 74rpx;
			text-align: center;
			border-radius: 37rpx;
			background-color: #fff;
			.uni-countdown{
				font-size: 28rpx;
				justify-content: center;
			}
		}
		.sound-box{
			right: 42rpx;
			image{
				width: 32rpx;
				height: 24rpx;
			}
		}
		.animal-box{
			margin-left: 166rpx;
			padding-top: 27vh;
			position: relative;
			width: 368rpx;
			image{
				margin: 0 auto;
				display: block;
				border: none;
				width: 368rpx;
				height: 368rpx;
				position: relative;
				z-index: 1;
			}
			text{
				position: absolute;
				bottom: 0;
				left: 120rpx;
				width: 186rpx;
				height: 70rpx;
				transform: scaleX(1.5);
				background-color: #51AC1B;
				border-radius: 50%;
			}
		}
		.bottom-box{
			padding: 0 48rpx;
			position: absolute;
			left: 0;
			bottom: 3%;
			width: 100%;
		}
		.bottom-item{
			font-size: 28rpx;
			color: #fff;
			text-align: center;
			.img-box{
				margin-bottom: 14rpx;
				width: 116rpx;
				height: 116rpx;
				background-color: #FFF;
				border-radius: 36rpx;
				justify-content: center;
				image{
					width: 48rpx;
					height: 48rpx;
				}
			}
		}
	}
	.loader-box{
		display: flex;
		justify-content: center;
		position: absolute;
		left: 0;
		bottom: 22%;
		width: 100%;
		image{
			width: 80rpx;
			height: 60rpx;
		}
	}
	.breath-loader {
		display: flex;
		gap: 8rpx;
	}

	.breath-line {
		width: 10rpx;
		height: 60rpx;
		background-color: #fff;
		border-radius: 5rpx;
		animation: breath 2s ease-in-out infinite;
		transform-origin: center bottom; /* 设置变换原点为底部中心 */
	}

	.breath-line:nth-child(1) { animation-delay: 0s; }
	.breath-line:nth-child(2) { animation-delay: 0.2s; }
	.breath-line:nth-child(3) { animation-delay: 0.4s; }
	.breath-line:nth-child(4) { animation-delay: 0.6s; }
	.breath-line:nth-child(5) { animation-delay: 0.8s; }

	@keyframes breath {
		0%, 100% { 
			opacity: 0.3; 
			transform: scaleY(0.5); /* 从底部向上缩小 */
			box-shadow: 0 0 5px rgba(255,255,255,0.1);
		}
		50% { 
			opacity: 1; 
			transform: scaleY(1); /* 恢复原始大小 */
			box-shadow: 0 0 10px rgba(255,255,255,0.8);
		}
	}
	
	.write-bottom{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 214rpx;
		border-radius: 25rpx 25rpx 0 0;
		background-color: #fff;
		padding: 0 46rpx;
		.picture-img{
			flex: 0 0 52rpx;
			width: 52rpx;
			height: 52rpx;
		}
		.txtarea-box{
			margin: 0 38rpx;
			width: 476rpx;
			height: 128rpx;
			position: relative;
			box-shadow: 0rpx 0rpx 10rpx 2rpx rgba(0,0,0, .1);
			border-radius: 40rpx;
			textarea{
				display: block;
				width: 100%;
				height: 100%;
				padding: 26rpx 100rpx 15rpx 25rpx;
				font-size: 28rpx;
			}
			.mic-icon{
				position: absolute;
				top: 36rpx;
				right: 28rpx;
			}
		}
		.record-img{
			flex: 0 0 52rpx;
			width: 52rpx;
			height: 48rpx;
		}
	}
	
	.popup-content{
		margin: 0 auto;
		width: 84%;
		height: 390rpx;
		background-color: #fff;
		border-radius: 40rpx;
		text-align: center;
		font-size: 28rpx;
		padding: 38rpx 36rpx 0;
		.des{
			margin: 38rpx 0 62rpx;
			color: #666;
			padding: 0 74rpx;
			line-height: 44rpx;
		}
		.btn-box{
			justify-content: center;
			.btn{
				width: 208rpx;
				height: 88rpx;
				line-height: 88rpx;
				font-size: 28rpx;
				text-align: center;
				border-radius: 22rpx;
			}
			.cancel{
				margin-right: 42rpx;
				color: #52a5f3;
				border: 2rpx solid #52A5F3;
			}
			.confirm{
				color: #fff;
				background-color: #52a5f3;
			}
		}
	}
	
</style>
